import React, { memo } from 'react'
import {  NavLink } from 'react-router-dom'
import { HeaderWrapper, HeaderLeft, HeaderRight } from './style'
import { headerLinks } from '../../common/local-data'
import { Input } from 'antd' 
import { SearchOutlined } from '@ant-design/icons'
export default memo(function ASAppHeader() {
  //页面代码
  const showSelectItem = (item, index) => {
    if(index < 3) {
      //前三个进行路由跳转
      return (
        <NavLink to={item.link}>{item.title}<i className='sprite_01 icon'></i></NavLink>
      )
    }else {
      //剩下的是链接标签
      return <a href={item.link} >{item.title}</a>
    }
  }
  return (
    <HeaderWrapper>
      {/* <NavLink to="/">发现音乐</NavLink>
      <NavLink to="/mine">我的音乐</NavLink>
      <NavLink to="/friend">朋友</NavLink> */}
      <div className="content wrap-v1">
        <HeaderLeft>
          <a href='/' className='logo sprite_01'>网易云音乐</a>
          <div className='select-list'>
            {
              headerLinks.map((item, index) => {
                return (
                  <div className='select-item' key={item.title}>{showSelectItem(item,index)}</div>
                )
              }) 
            }
          </div>
        </HeaderLeft>
        <HeaderRight>
            <Input className='search' placeholder='音乐/视频/电台/用户' prefix={<SearchOutlined />}/>
            <div className='center'><a href='https://music.163.com/#/login?targetUrl=%2Fcreatorcenter' >创作者中心</a></div>
            <div >登录</div>
        </HeaderRight>
      </div>
      <div className="divider"  ></div>
    </HeaderWrapper>
  )
})

